<template>
    <div>
        <div class="d2">
      <div class="dd1">
        灯杆编号:&nbsp;&nbsp;&nbsp;<el-input
          size="mini"
          v-model="query.lpName"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="dd2">
        区域:&nbsp;&nbsp;&nbsp;<el-select size="mini" v-model="query.areaId" placeholder="请选择">
          <el-option
            v-for="area in options"
            :key="area.areaId"
            :label="area.areaName"
            :value="area.areaId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dd3">
        <el-row>
          <el-button type="primary" round size="small" @click="loadMount()">查询</el-button>
          <el-button type="info" round size="small" @click="loadNew()">重置</el-button>
        </el-row>
      </div>
    </div>
    <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="照明设备">
              <span v-if="props.row.state1==1">正常</span>
              <span v-if="props.row.state1==2">异常</span>
              <span v-if="props.row.state1==3">关闭</span>
            </el-form-item>
            <el-form-item label="视频设备">
                <span v-if="props.row.state2==1">正常</span>
              <span v-if="props.row.state2==2">异常</span>
              <span v-if="props.row.state2==3">关闭</span>
            </el-form-item>
            <el-form-item label="广播设备">
                <span v-if="props.row.state3==1">正常</span>
              <span v-if="props.row.state3==2">异常</span>
              <span v-if="props.row.state3==3">关闭</span>
            </el-form-item>
            <el-form-item label="无线设备">
                <span v-if="props.row.state4==1">正常</span>
              <span v-if="props.row.state4==2">异常</span>
              <span v-if="props.row.state4==3">关闭</span>
            </el-form-item>
            <el-form-item label="大屏设备">
                <span v-if="props.row.state5==1">正常</span>
              <span v-if="props.row.state5==2">异常</span>
              <span v-if="props.row.state5==3">关闭</span>
            </el-form-item>
            <el-form-item label="环境设备">
                <span v-if="props.row.state6==1">正常</span>
              <span v-if="props.row.state6==2">异常</span>
              <span v-if="props.row.state6==3">关闭</span>
            </el-form-item>
            <el-form-item label="具体坐标">
              <span>({{ props.row.lpX }},{{props.row.lpY}})</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="灯杆编号"
        prop="lpName">
      </el-table-column>
      <el-table-column
        label="所在区域"
        prop="areaName">
      </el-table-column>
      <el-table-column
        label="连接状态"
        prop="facStateName">
      </el-table-column>
      <el-table-column
        label="负责人"
        prop="userName">
      </el-table-column>
      <el-table-column
        label="联系方式"
        prop="userTel">
      </el-table-column>
      <el-table-column
        label="操作"
        prop="lpId"
        >
        <template slot-scope = "scope">
        <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button>编辑操作 感觉不需要 -->
        <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.lpId)"></el-button>
      </template>
      </el-table-column>
      
    </el-table>
    </div>
    <div class="block">
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>

    </div>
  </template>
  
 
  
  <script>
    export default {
      data() {
        return {
          tableData: [],
          query: {
            currentPage: 1, //代表当前页
            pageSize: 6, //代表每页显示多少条数据
            areaId:"",
            lpName: ""
         },
         page: {
            pageSizes: [6, 12, 30, 60, 120], //下拉列表中的数组
            total: 0, //一共有多少条数据
        },
        }
      },
      methods: {
        del(id){
          this.$axios.delete("lights/"+id).then((res) => {
            this.$message.success("删除成功");
            this.loadMount();
      });
        },
      loadMount() {
      this.$axios.post("lights/query",this.query).then((res) => {
        this.tableData = res.data.data.lightList;
        this.page.total = res.data.data.total;
      });
    },
    loadNew(){
      this.query.areaId="";
      this.query.lpName="";
      this.loadMount();
    },
    loadArea(){
      this.$axios.get("area").then((res) => {
       this.options = res.data.data.areaList;
      });
    },
    handleSizeChange(val) {
        //当每页数据改变时
      this.query.pageSize = val;
      this.loadMount();
      },
      handleCurrentChange(val) {
         //当点击页码时
      this.query.currentPage = val;
      this.loadMount();
      }
      },
      mounted() {
        this.loadMount();
     this.loadArea();
      },
    }
  </script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.d2 {
  width: auto;
  height: 35px;
}
.dd1 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.el-input {
  width: 100px;
  height: 33px;
}
.dd2 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.dd3 {
  width: 250px;
  height: 33px;
  font-size: 14px;
  float: right;
}
</style>